<template>
  <div>
    <el-card v-show="!showDetail">
			<el-tabs v-model="activeName">
        <el-tab-pane label="在线" name="first">
          <div>
						<el-table ref="multipleTable" :data="tableData" v-loading="loading1">
							<el-table-column prop="videoName" label="摄像头">
							</el-table-column>
							<el-table-column prop="head" label="绑定人">
							</el-table-column>
							<el-table-column prop="name" label="工程名称">
							</el-table-column>
							<el-table-column prop="date" label="施工时间" width="200">
							</el-table-column>
							<el-table-column prop="address" label="地点">
							</el-table-column>
							<el-table-column fixed="right" label="操作">
								<template slot-scope="scope">
									<el-button type="text" @click="showDetail=true" size="small">查看实时视频</el-button>
								</template>
							</el-table-column>
						</el-table>
						<div class="footer">
							<el-pagination @current-change="handleChangePage" :current-page.sync="page" :page-size="pageSize" layout="prev, pager, next" :total="total"></el-pagination>
						</div>
					</div>
        </el-tab-pane>
        <el-tab-pane label="离线" name="second">
          <div>
						<el-table ref="multipleTable" :data="tableData" v-loading="loading2">
							<el-table-column prop="videoName" label="摄像头">
							</el-table-column>
							<el-table-column prop="head" label="绑定人">
							</el-table-column>
							<el-table-column prop="name" label="工程名称">
							</el-table-column>
							<el-table-column prop="date" label="施工时间" width="200">
							</el-table-column>
							<el-table-column prop="address" label="地点">
							</el-table-column>
							<el-table-column fixed="right" label="操作">
								<template slot-scope="scope">
									<el-popconfirm
										title="通知XXXX远程唤醒摄像头？"
										@confirm="sendMsg(scope.row)"
									>
										<el-button type="text" size="small" slot="reference">发起远程唤醒</el-button>
									</el-popconfirm>
								</template>
							</el-table-column>
						</el-table>
						<div class="footer">
							<el-pagination @current-change="handleChangePage" :current-page.sync="page" :page-size="pageSize" layout="prev, pager, next" :total="total"></el-pagination>
						</div>
					</div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 施工票详情 -->
    <div v-if="showDetail">
      <player-view @back="back" :videoDetail="videoDetail"  key="_player_view"></player-view>
    </div>
  </div>
</template>

<script>
import PlayerView from './player.vue'
export default {
  name: 'ticketList',
  components: {
    PlayerView,
  },
  data() {
    return {
      loading1: false,
      loading2: false,
			activeName: 'first',
      showDetail: false, //展示详情页面
      videoDetail: {},
      tableData: [
        {videoName: 'XXX摄像头', name: 'XXX配套工程', date: '2023-01-29 ~ 2023-06-25', address: 'XXX市XXX街道', head: '张三'},
        {videoName: 'XXX摄像头', name: 'XXX配套工程', date: '2023-01-29 ~ 2023-06-25', address: 'XXX市XXX街道', head: '张三'},
        {videoName: 'XXX摄像头', name: 'XXX配套工程', date: '2023-01-29 ~ 2023-06-25', address: 'XXX市XXX街道', head: '张三'},
        {videoName: 'XXX摄像头', name: 'XXX配套工程', date: '2023-01-29 ~ 2023-06-25', address: 'XXX市XXX街道', head: '张三'},
        {videoName: 'XXX摄像头', name: 'XXX配套工程', date: '2023-01-29 ~ 2023-06-25', address: 'XXX市XXX街道', head: '张三'},
        {videoName: 'XXX摄像头', name: 'XXX配套工程', date: '2023-01-29 ~ 2023-06-25', address: 'XXX市XXX街道', head: '张三'},
        {videoName: 'XXX摄像头', name: 'XXX配套工程', date: '2023-01-29 ~ 2023-06-25', address: 'XXX市XXX街道', head: '张三'},
        {videoName: 'XXX摄像头', name: 'XXX配套工程', date: '2023-01-29 ~ 2023-06-25', address: 'XXX市XXX街道', head: '张三'},
        {videoName: 'XXX摄像头', name: 'XXX配套工程', date: '2023-01-29 ~ 2023-06-25', address: 'XXX市XXX街道', head: '张三'},
        {videoName: 'XXX摄像头', name: 'XXX配套工程', date: '2023-01-29 ~ 2023-06-25', address: 'XXX市XXX街道', head: '张三'},
      ],
      page: 1,
      pageSize: 10,
      total: 100,
    }
  },
  mounted() {
    
  },
  methods: {
    back(){
      this.showDetail = false
      // location.reload()
    },
		sendMsg(row) {

		},
    handleChangePage() {
      
    },
  }
}
</script>

<style lang="scss" scoped>
.select_box {
  .title {
    font-size: 14px;
    margin-bottom: 10px;
  }
}
.footer {
	margin-top: 10px;
	text-align: center;
}
</style>
